<template>
  <lay-container fluid="true" style="padding: 10px;height: 100%;overflow-y: hidden">
    <lay-card>
      <lay-form style="margin-top: 20px">
        <lay-row>
          <lay-col :md="6">
            <lay-form-item label="关键字：" label-width="60">
              <lay-input
                  v-model="qm.key" style="width: 90%" placeholder="设备编号	"
                  :allow-clear="true"
              ></lay-input>
            </lay-form-item>
          </lay-col>

          <lay-col :md="12">
            <lay-form-item label="在线状态：" label-width="80">
              <lay-select v-model="qm.logicState"
                          :allow-clear="true"
                          placeholder="在线状态"
              >
                <lay-select-option value="在线" label="在线"></lay-select-option>
                <lay-select-option value="离线" label="离线"></lay-select-option>

              </lay-select>
            </lay-form-item>
          </lay-col>


          <lay-col :md="6">
            <lay-form-item label-width="0">
              <lay-button type="primary" @click="toSearch">查询</lay-button>
              <lay-button @click="toReset">重置</lay-button>
            </lay-form-item>
          </lay-col>
        </lay-row>
      </lay-form>
    </lay-card>

    <div class="maintable-box"  >
      <lay-table
          :height="'100%'"
          :page="page"
          :columns="columns"
          :dataSource="dataSource"
          :default-toolbar="defaultToolbar"
          v-model:selectedKeys="selectedKeys"
          even
          @row="rowClick"
          @Change="pageChange"
          @sortChange="sortChange"
      >
        <template v-slot:toolbar>
          <lay-row>
            <lay-col :md="18">
              <!--                   <lay-button size="sm" type="primary"-->
              <!--                   -->
              <!--                    @click="addRow"-->
              <!--                    v-permission="['/htrole/index:auth,/htrole/insert']"-->
              <!--                    >添加</lay-button>-->
              <!--<lay-button size="sm">删除</lay-button> -->
            </lay-col>
            <lay-col style="text-align:right;">


              <lay-button prefix-icon="layui-icon-export" suffix-icon=""
                          @click="tableExport"
              >导出</lay-button>

            </lay-col>
          </lay-row>

        </template>

        <template v-slot:commPortName="{data}">
          <a href="javascript:;" class="myhref"
             @click="toPortDetail(data)"
          >{{data.commPortName}}</a>
        </template>
        <template v-slot:commProxyName="{data}">
          <a href="javascript:;" class="myhref"
             @click="toProxyDetail(data)"
          >{{data.commProxyName}}</a>
        </template>



        <template v-slot:logicState="{data}">

          <div v-show="data.logicState == '在线'">
            <lay-tag color="#2dc570" variant="light">在线</lay-tag>
          </div>
          <div v-show="data.logicState != '在线'">
            <lay-tag color="#F5319D" variant="light">离线</lay-tag>
          </div>

        </template>


        <template v-slot:operator="{data}">
          <lay-button size="xs"
                      border="green" border-style="dashed"
                      @click="toConn(data)"
          >上下线</lay-button>
          <lay-button size="xs"
                      border="green" border-style="dashed"
                      @click="toData(data)"
          >数据</lay-button>
        </template>

      </lay-table>
    </div>

  </lay-container>
</template>

<script lang="ts">
import { ref, watch,reactive,onMounted,h } from 'vue'
import { layer } from '@layui/layer-vue'
import MyHttp from "../../library/MyHttp";
import MyWin from "../../library/MyWin";
import MyPage from "../../library/MyPage";
import {MyExcel} from "../../library/MyExcel";
import {MySimpleExport,TableColumn} from "../../library/MySimpleExport";
import port_detail from "../commport/detail.vue";
import proxy_detail from "../commproxy/detail.vue";
import comm_data from "../commdevice/data.vue";
import comm_conn from "../commdevice/conn.vue";

export default {
  props:{
    id:String
  },

  setup(prop:any, context:any) {
    const baseUrl="/commdevice";
    const baseQUrl=baseUrl+"/page";
    const pageName="联网设备";

    const myWin=ref<any>(null);
    const selectedKeys = ref([])
    const defaultToolbar = ref(false)
    const page = ref(  new MyPage()  );

    const columns = [
      // {
      //   title: '复选',
      //   width: '50px',
      //   type: 'checkbox',
      //   fixed: 'left'
      // },
      {
        title: '序号',
        width: '50px' ,
        key: 'rowNo'
      },
      { key:'sid',title: '设备编号', width: '200px', },
      { key:'clientId',title: '客户端', width: '200px', },
      { key:'physicalState',title: '连接状态', width: '80px',

      },
      { key:'logicState',title: '在线状态', width: '80px',
        customSlot: 'logicState',
      },
      { key:'lstRevDt',title: '最近数据时间', width: '200px', },


      {
        title: '操作',
        width: '100px',
        customSlot: 'operator',
        // key: 'operator',
        fixed: 'right'
      }
    ]

    const dataSource = ref([]);

    const rowClick = function (data: any) {}

    const rowDoubleClick = function (data: any) {}

    const pageChange = function ({ current, limit }: any) {
      if(qm.pageSize!=limit)
      {
        qm.pageSize=limit ;
        qm.page=1;
        query(1);
      }else{
        query(current)
      }


    }
    function toSearch() {
      query(1);
    }

    function toReset() {
      qm.key= '';
      qm.dtb='';
      qm.dte='';
    }

    const qm=reactive({
      commPortId:prop.id,
      key:"",
      dtb:"",
      dte:"",
      page: 1,
      pageSize: 10,
      sortFields:"sid"
    });
    const query=async (pageIndex:number) =>{
      if(pageIndex){
        page.value.current=pageIndex;
        qm.page=pageIndex;
      }
      var r=await new MyHttp().page(baseQUrl,qm,
          {
          },
          columns
      );
      dataSource.value=r.data.records;
      page.value.total=r.data.totalRow;
    }

    const sortChange = (key: any, sort: number) => {
      qm.sortFields=`${key} ${sort}`;
      query(0);
    }
    const tableExport=async()=>{

      var cols=columns as Array<TableColumn>;
      new MySimpleExport().exportExcel(
          {
            qm,
            url:baseQUrl,
            name:pageName,
            columns:cols,
            lx:"page"
          }
      );
    }



    const toPortDetail=(data:any)=>{
      var opt={
        title: '端口详情',
        content: h( port_detail,
            {
              id:data.commPortId,
              onOk:(data:any)=>{
              }
            }
        ),
        area: ['800px','700px']
      };
      myWin.value.open(opt );
    }
    const toProxyDetail=(data:any)=>{
      var opt={
        title: '代理详情',
        content: h( proxy_detail,
            {
              id:data.commProxyId,
              onOk:(data:any)=>{
              }
            }
        ),
        area: ['800px','400px']
      };
      myWin.value.open(opt );
    }

    const toData=(data:any)=>{
      var opt={
        title: `通讯数据:${data.sid}`,
        content: h( comm_data,
            {
              sid:data.sid,
              onOk:(data:any)=>{
              }
            }
        ),
        area: ['1200px','700px']
      };
      myWin.value.open(opt );
    }

    const toConn=(data:any)=>{
      var opt={
        title: `上下线数据:${data.sid}`,
        content: h( comm_conn,
            {
              sid:data.sid,
              onOk:(data:any)=>{
              }
            }
        ),
        area: ['1200px','700px']
      };
      myWin.value.open(opt );
    }

    onMounted(() =>{
      myWin.value=new MyWin();
      query(1);
    });
    return {
      columns,
      dataSource,
      selectedKeys,
      defaultToolbar,
      page,
      rowClick,
      rowDoubleClick,
      pageChange,
      toReset,
      toSearch,


      qm,
      query,

      sortChange,
      tableExport,

      myWin,


      toPortDetail,
      toData,
      toConn,
      toProxyDetail,


    }
  }
}
</script>
<style scoped>
.maintable-box{
  height:calc(100% - 130px)
}
</style>